<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片上传</title>
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/jquery-1.9.1.min.js"></script>
    <script src="../js/flexible.js"></script>
</head>
<body>
<h1 class="title-h1">手机模板——图片上传</h1>
<form action="" class="card-form">
    <div class="fileImg">
        <p>上传照片 <span><i>0</i>/3</span></p>
        <div class="file-box">
            <ul class="file-img"></ul>
            <div class="fileBox" id="fileBox">
                <input type="file" id="fileAdd"  name="imgs[]" class="none" multiple="multiple"  accept="image/*" capture="camera" />
                <div  class="file-add" id="file-add"></div>
            </div>
        </div>
    </div>
    <button type="button" class="cardBtn">提交</button>
</form>
<script>
    var fileL;
    var tim;
    var img =new Array();
    var formData=new FormData();

    $('#file-add').click(function(){
        $("#fileAdd").click();
    });

    //点击删除图片
    $(document).on('click', '.file-delete', function() {
        var liLs = $(".fileImg p i").html();
        $(this). parent(".file-cap").parent("li").remove();
        $(".fileImg p i").html(parseInt(liLs)-1);
    });
    $('#fileAdd').change(function(e){
        file = e.target.files || e.dataTransfer.files;
        var index =$(this).val().lastIndexOf(".");
        var ext = $(this).val().substring(index + 1, $(this).val().length);
        console.log("文件类型："+ext);

        if(ext != "jpg" && ext!="png" && ext!="gif") {
//            Massage(2,"提示","图片格式不正确",1000);
            alert("图片格式不正确");
            return false;
        }
        var liL = $(".fileImg p i").html();
        if (file) {
            //定义一个文件阅读器
            fileL = file.length;//图片长度
            console.log(fileL)
            if($(".file-ul li").length<4){ //限制图片上传长度
                var reader;
                if(fileL<4){ //限制图片上传长度
                    for (var i=0; i<fileL;i++) {
                        reader = new FileReader();
                        //文件装载后将其显示在图片预览里
                        console.log(reader);
                        reader.onload = function (s) {

                            tim =parseInt(s.timeStamp);
                            $(".file-img").append("<li at="+tim+">" +
                                "<img src=" + this.result + ">" +
                                "<div class='file-cap'>" +
                                "<i class='file-delete'></i>" +
                                "</div>" +
                                "</li>");
                        };
                        //装载文件
                        reader.readAsDataURL(file[i]);
                        img.push($("#fileAdd")[0].files[i]);
                    }
                }else{
//                    Massage(2,"提示","图片不能超过3张！",1000);
                    alert("图片不能超过3张");
                    for (var i=0; i<3;i++) {
                        reader = new FileReader();
                        //文件装载后将其显示在图片预览里
                        console.log(reader);
                        reader.onload = function (s) {
                            tim =parseInt(s.timeStamp);
                            $(".file-img").append("<li at="+tim+">" +
                                "<img src=" + this.result + ">" +
                                "<div class='file-cap'>" +
                                "<i class='file-delete'></i>" +
                                "</div>" +
                                "</li>");
                        };
                        //装载文件
                        reader.readAsDataURL(file[i]);
                        img.push($("#fileAdd")[0].files[i]);
                        //formData.append('file',$("#fileAdd")[0].files[0]);
                    }
                }
            }else {
//                Massage(2,"提示","图片不能超过3张！",1000);
                alert("图片不能超过3张");
            }

        }
        //计算图片张数，并显示
        if((parseInt(liL)+fileL)>3){
            $(".fileImg p i").html(3);
        }else {
            $(".fileImg p i").html(parseInt(liL)+fileL);
        }
    });


    $(".cardBtn").on('click',function () {


//        formData.append('load',$('#load').val());

        $.each(img,function(i,k){
            formData.append('img'+i,img[i],img[i].name);
        });

        formData.append('imgcount',img.length);
        console.log(formData);
//        $.ajax({
//            type:"POST",
//            url :"{:U('Message/message')}",
//            data:formData,
//            contentType:false,
//            processData:false,
//            success:function(res){
//                if(res.code==0){
//                    $(".card-pop").hide();
//                    $(".card-form").animate({"top":"-100%"},500);
//                    Massage(1,"成功提示","感谢您的参与，成功入选后工作人员将电话与您联系。",2000);
//                    setTimeout(function(){
//                        window.location.reload();
//                    },1500)
//                }else{
//                    Massage(2,"失败提示",res.msg,2000);
//                }
//            }
//        });
    });
</script>
</body>
</html>